<header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <h4 style="pointer-events: none;">
        {{ 'Story.Toolbar.SaveAs' | translate: {Default: 'Save As'} }}...
    </h4>
</header>

<mat-dialog-content class="mat-typography" fxLayout="column" fxLayoutAlign="start stretch">
    <mat-form-field appearance="fill">
        <mat-label>
            {{ 'Story.Common.Name' | translate: {Default: 'Name'} }}
        </mat-label>
        <input matInput [(ngModel)]="model.name" required>
    </mat-form-field>

    <mat-form-field appearance="fill">
        <mat-label>
            {{ 'Story.Common.Description' | translate: {Default: 'Description'} }}
        </mat-label>
        <textarea matInput [(ngModel)]="model.description"></textarea>
    </mat-form-field>
</mat-dialog-content>

<mat-dialog-actions>
    <button mat-button>
        {{ 'STORY.COMMON.RESET' | translate: { Default: 'Reset' } }}
      </button>

    <div ngmButtonGroup>
        <button mat-button mat-dialog-close>
            {{ 'STORY.COMMON.CANCEL' | translate: { Default: 'Cancel' } }}
        </button>
        <button mat-raised-button color="accent" cdkFocusInitial [mat-dialog-close]="model">
            {{ 'STORY.COMMON.APPLY' | translate: { Default: 'Apply' } }}
        </button>
    </div>
</mat-dialog-actions>
